<template>
	
	<view class="box">
		<text class="title">这是横向布局</text> 
		
		<view class="box-item">
			<view class="boxrow style-red" >A</view>
			<view class="boxrow style-blue">B</view>
			<view class="boxrow style-green">C</view>
		</view>
		<text class="title2">这是纵布局</text> 
		
		
		<view class="box-columnitem">
			<view class="boxcolumin style-red" >A</view>
			<view class="boxcolumin style-blue">B</view>
			<view class="boxcolumin style-green">C</view>
		</view>
		<text class="title2">滑动布局</text> 
		<scroll-view class="sview" scroll-x scroll-y="">
			<view class="group" >
				<view class="item">1111</view>
				<view class="item">2222</view>
				<view class="item">3333</view>
				<view class="item">4444</view>
			</view>
			
		</scroll-view>

	</view>
	
</template>

<script>
</script>

<style lang="scss">
	
.box{
	width: 750rpx;
	height:100%;
	.title{
		text-align: center;
	}
	
	.box-item{
		background-color: aqua;
		flex-direction:row;
		display: flex;
		.boxrow{
			width: 33.3%;
		   height: 100rpx;
			background-color: blue;
			text-align: center;
		}
	}

	.box-columnitem{
		width: 200rpx;
		flex-direction: column;
		display: flex;
		.boxcolumin{
			height: 200rpx;
		}
		
	}
	
	.style-red{
		background-color: red;
	}
	
	.style-blue{
		background-color: blue;
	}
	.style-green{
		background-color: green;
	}
	
    .sview{
    	border: 1px solid red;
		box-sizing: border-box;
		height: 200rpx;
		height: 100rpx;
		.group{
			white-space: nowrap;
			.item{
				width: 200rpx;
				height: 200rpx;
				background-color: lawngreen;
				display: inline-block;
				margin-right: 10rpx;
			}
			
		}
    }	
	
}

</style>